<template>
  <div class="machine-work noScroll">
    <div class="machine-work-item"
         v-for="(item,index) in list"
         :key="index">
      <div class="machine-work-item-title">
        <div class="machine-work-item-title-left machine-work-item-title-notstart"
             v-if="item.status == 0">未开始</div>
        <div class="machine-work-item-title-left machine-work-item-title-notstart"
             v-if="item.status == 1">进行中</div>
        <div class="machine-work-item-title-left machine-work-item-title-notstart"
             v-if="item.status == 2">未完成</div>
        <div class="machine-work-item-title-left machine-work-item-title-underway"
             v-if="item.status == 3">已完成</div>
        <div class="machine-work-item-title-cont">
          <div>{{item.planName}}</div>
          <div>垃圾清运</div>
        </div>
        <Icon custom="i-icon icon-guiji1 track"
              size="24"
              color="#25BB96"
              class="m-r-4 cursor-pointer"
              @click.stop="onClickTrack(item)" />
        <!-- <Icon custom="i-icon icon-youjiantou"
              size="30"
              class="machine-work-item-title-right"
              @click.stop="onClickDetail(item)" /> -->
      </div>
      <div class="machine-work-item-cont">
        <div>{{item.shiftName}} ({{getWorkTime(item.planStartTime)}} ~ {{getWorkTime(item.planEndTime)}})</div>
        <div>{{item.carNum}}</div>
      </div>
      <div class="machine-work-item-progress">
        <div class="machine-work-item-progress-text">完成{{item.finishRate ? item.finishRate : 0}}%</div>
        <Progress :percent="item.finishRate ? item.finishRate : 0"
                  hide-info
                  :stroke-width="5" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array
  },
  data () {
    return {

    }
  },
  methods: {
    onClickDetail (item) {
      this.$emit('onClickDetail', item)
    },
    // 去掉年月日  秒
    getWorkTime (time) {
      if (time) {
        let arr = time.split(' ')
        return arr[1]
      } else {
        return ''
      }
    },
    // 轨迹跳转
    onClickTrack (item) {
      this.$emit('onClickTrack', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.machine-work {
  height: 620px;
  overflow: auto;
  .machine-work-item {
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.7);
    .machine-work-item-title {
      display: flex;
      align-items: center;
      .machine-work-item-title-left {
        width: 44px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #eee;
        margin-right: 20px;
        font-size: 12px;
      }
      // 未开始
      .machine-work-item-title-notstart {
        border: 1px solid #a6a6a6;
        background: rgba(166, 166, 166, 0.2);
      }
      // 进行中
      .machine-work-item-title-underway {
        border: 1px solid #ebb31d;
        background: rgba(235, 179, 29, 0.2);
      }
      .machine-work-item-title-cont {
        flex: 1;
        div:first-child {
          font-size: 16px;
          color: #eee;
          margin-bottom: 10px;
        }
      }
      .machine-work-item-title-right {
        cursor: pointer;
      }
    }
    .machine-work-item-cont {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px 8px 0;
    }
    .machine-work-item-progress {
      display: flex;
      align-items: center;
      padding-right: 20px;
      .machine-work-item-progress-text {
        width: 100px;
      }
    }
  }
}
</style>
